<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="表格操作"
    :close-on-click-modal="false"
    @close="dialogVisible = false"
  >
    <el-button type="primary" @click="onEditOperation()"> 添加操作 </el-button>
    <el-table
      :height="'calc(100vh - 350px)'"
      border
      fit
      size="small"
      highlight-current-row
      :data="operationList"
    >
    <el-table-column align="center" label="操作类型">
        <template slot-scope="{ row }">
          <span> {{ row.operationType == 0 ? '简单操作' : '前端内置弹框' }} </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作名称">
        <template slot-scope="{ row }">
          <span> {{ row.name }} </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作说明">
        <template slot-scope="{ row }">
          <span> {{ row.desc }} </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="api">
        <template slot-scope="{ row }">
          <span> {{ row.api }} </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="请求类型">
        <template slot-scope="{ row }">
          <span> {{ row.requestType }} </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="body参数">
        <template slot-scope="{ row }">
          <span> {{ row.bodyParams }} </span>
        </template>
      </el-table-column>
      <el-table-column label="操作确认" align="center" width="75px">
        <template slot-scope="{ row }">
          <span> {{ row.needConfirm ? '是' : '否' }} </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="展示样式">
        <template slot-scope="{ row }">
          <span> {{ row.displayType }} </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200px">
        <template slot-scope="{ row }">
          <el-button type="primary" @click="onEditOperation(row)"
            >修改</el-button
          >
          <el-button type="danger" @click="onDeleteOperation(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="onOK">确定</el-button>
    </span>
    <operation-edit-dialog
      :visible.sync="editDialogVis"
      :value="operationToEdit"
      @success="onEditOK"
    ></operation-edit-dialog>
  </el-dialog>
</template>

<script>
import { deepClone } from '@/utils'
import OperationEditDialog from './operationEditDialog'

export default {
  name: 'OperationListDialog',
  components: { OperationEditDialog },
  filters: {
    atomFieldDisplay(item) {
      return item.desc || item.fieldName
    },
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Array
    },
  },
  data() {
    return {
      editDialogVis: false,
      operationToEdit: {},
      operationList: this.value,
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible')
      },
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.operationList = this.value
      }
    },
  },
  methods: {
    onEditOperation(op) {
      if (!op) {
        op = {
          operationType: 0,
          name: '',
          desc: '',
          api: '',
          bodyParams: '',
          requestType: 'get',
          needConfirm: true,
          displayType: 'primary',
          dialogName: ''
        }
      } else {
        if (!op.id) {
          op.id = Math.random()
        }
        op = deepClone(op)
      }
      this.operationToEdit = op
      this.editDialogVis = true
    },

    onDeleteOperation(op) {
      const index = this.operationList.indexOf(op)
      if (index >= 0) {
        this.operationList.splice(index, 1)
      }
    },

    onEditOK(op) {
      console.log(op, this.operationList)
      if (op.id) {
        const index = this.operationList.findIndex(item => { return item.id === op.id })
        if (index >= 0) {
          this.$set(this.operationList, index, op)
        } else {
          this.operationList.push(op)
        }
      } else {
        if (!this.operationList) {
          this.operationList = []
        }
        this.operationList.push(op)
      }
      this.editDialogVis = false
    },

    onOK() {
      this.operationList.forEach(item => {
        if (item.id) {
          delete item.id
        }
      })
      this.$emit('success', this.operationList)
    },
  },
}
</script>

<style scoped>
</style>
